<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
  // 初始值
  initialValue: {
    type: String,
    default: ''
  },
  // 是否显示键盘
  visible: {
    type: Boolean,
    default: false
  },
  // 标题
  title: {
    type: String,
    default: '数字键盘'
  },
  // 是否允许小数点
  allowDecimal: {
    type: Boolean,
    default: false
  },
  // 最大长度
  maxLength: {
    type: Number,
    default: 20
  },
  // 是否为密码输入
  isPassword: {
    type: Boolean,
    default: false
  },
  // 是否显示赠送数量输入框
  showGiveInput: {
    type: Boolean,
    default: false
  },
  // 赠送数量的值
  giveValue: {
    type: String,
    default: ''
  },
  // 是否显示支付方式选择
  showPayType: {
    type: Boolean,
    default: false
  },
  // 支付方式值
  payTypeValue: {
    type: Number,
    default: 1
  }
});

const emit = defineEmits(['update:visible', 'confirm', 'cancel', 'input', 'clear', 'giveInput', 'update:payTypeValue']);

// 当前输入值
const inputValue = ref(props.initialValue);

// 输入数字
const inputKey = (key) => {
  // 如果已达到最大长度，不再输入
  if (inputValue.value.length >= props.maxLength) {
    return;
  }
  
  // 如果输入小数点，检查是否已有小数点或是否允许小数点
  if (key === '.' && (!props.allowDecimal || inputValue.value.includes('.'))) {
    return;
  }
  
  inputValue.value += key;
  emit('input', inputValue.value);
};

// 删除最后一个字符
const deleteKey = () => {
  if (inputValue.value.length > 0) {
    inputValue.value = inputValue.value.substring(0, inputValue.value.length - 1);
    emit('input', inputValue.value);
  }
};

// 清空输入
const clearInput = () => {
  inputValue.value = '';
  emit('clear');
  emit('input', inputValue.value);
};

// 确认输入
const confirmInput = () => {
  emit('confirm', inputValue.value);
  emit('update:visible', false);
};

// 取消输入
const cancelInput = () => {
  emit('cancel');
  emit('update:visible', false);
};

// 切换支付方式
const changePayType = (value) => {
  emit('update:payTypeValue', value);
};
// 赠送按钮点击处理
const handleGiveInput = () => {
  emit('giveInput', inputValue.value);
  // 不清空输入值，只发送当前值
};
</script>



<template>
  <Transition name="keyboard-fade">
    <div class="numeric-keyboard-overlay" v-if="visible" @click.self="cancelInput">
      <div class="numeric-keyboard-container">
        <div class="keyboard-header">
          <h3 class="keyboard-title">{{ title }}</h3>
          <div class="input-display">
            {{ isPassword ? '*'.repeat(inputValue.length) : inputValue }}
          </div>
          <div v-if="showGiveInput" class="input-display give-input">
            {{ giveValue }}
          </div>
          <div v-if="showPayType" class="pay-type">
            <label>
              <input type="radio" name="payType" value="1" :checked="payTypeValue === 1" @change="changePayType(1)">
              普通
            </label>
            <label>
              <input type="radio" name="payType" value="2" :checked="payTypeValue === 2" @change="changePayType(2)">
              现金
            </label>
          </div>
          <div class="button-group">
            <button @click="clearInput" class="clear-btn">清空</button>
            <button v-if="showPayType" @click="handleGiveInput" class="give-btn">换行</button>
          </div>
        </div>
        
        <div class="keyboard-grid">
          <button @click="inputKey('1')" class="key">1</button>
          <button @click="inputKey('2')" class="key">2</button>
          <button @click="inputKey('3')" class="key">3</button>
          <button @click="inputKey('4')" class="key">4</button>
          <button @click="inputKey('5')" class="key">5</button>
          <button @click="inputKey('6')" class="key">6</button>
          <button @click="inputKey('7')" class="key">7</button>
          <button @click="inputKey('8')" class="key">8</button>
          <button @click="inputKey('9')" class="key">9</button>
          <button v-if="allowDecimal" @click="inputKey('.')" class="key">.</button>
          <button @click="inputKey('0')" class="key">0</button>
          <button @click="deleteKey" class="key delete-key">删除</button>
        </div>
        
        <div class="keyboard-footer">
          <button @click="confirmInput" class="confirm-btn">确定</button>
          <button @click="cancelInput" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  </Transition>
</template>

<style lang="scss" scoped>
.numeric-keyboard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.numeric-keyboard-container {
  width: 400px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.keyboard-header {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid #eee;
  
  .keyboard-title {
    margin: 0;
    color: #303133;
    font-size: 16px;
    font-weight: 500;
  }
  
  .input-display {
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    background-color: #f5f7fa;
    border-radius: 4px;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #dcdfe6;
  }
  
  .clear-btn {
    align-self: flex-end;
    padding: 6px 15px;
    background-color: #f56c6c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    
    &:hover {
      background-color: #e64a4a;
    }
  }
}

.keyboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 15px;
  
  .key {
    height: 60px;
    background-color: #f5f7fa;
    border: none;
    border-radius: 4px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
      background-color: #e4e7ed;
    }
    
    &:active {
      transform: translateY(2px);
    }
    
    &.delete-key {
      background-color: #e1f5fe;
      color: #0288d1;
      
      &:hover {
        background-color: #b3e5fc;
      }
    }
  }
}

.keyboard-footer {
  display: flex;
  padding: 15px;
  border-top: 1px solid #eee;
  gap: 10px;
  
  button {
    flex: 1;
    height: 45px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    
    &.confirm-btn {
      background-color: #1976D2;
      color: white;
      
      &:hover {
        background-color: #1565C0;
      }
    }
    
    &.cancel-btn {
      background-color: #f5f7fa;
      color: #606266;
      
      &:hover {
        background-color: #e4e7ed;
      }
    }
  }
}

.give-btn {
  padding: 6px 15px;
  background-color: #67c23a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  
  &:hover {
    background-color: #5daf34;
  }
}

// 过渡动画
.keyboard-fade-enter-active,
.keyboard-fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.keyboard-fade-enter-from,
.keyboard-fade-leave-to {
  opacity: 0;
  transform: scale(0.95);
}
</style>